import React from "react";
import { Card, Button, Form, Input, type FormProps } from "antd";
import { UserOutlined, UnlockOutlined } from "@ant-design/icons";
import type { RouteComponentProps } from "react-router-dom";
const Login: React.FC<RouteComponentProps> = (props) => {
    type FieldType = {
        username: string;
        password: string;
    };

    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        localStorage.setItem('token', values.username)
        props.history.push('/admin/home')
    };
    return (
        <div className="logins">
            <div className="log">
                <Card
                    title="登录页面"
                    style={{ width: 500, margin: "20px auto" }}
                >
                    <Form onFinish={onFinish}>
                        <Form.Item<FieldType>
                            name="username"
                            rules={[{ required: true, message: "请输入手机号!" },
                            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
                            ]}
                        >
                            <Input prefix={<UserOutlined />} />
                        </Form.Item>

                        <Form.Item<FieldType>
                            name="password"
                            rules={[{ required: true, message: "请输入密码!" }]}
                        >
                            <Input.Password prefix={<UnlockOutlined />} />
                        </Form.Item>

                        <Form.Item label={null}>
                            <Button type="primary" htmlType="submit" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        </div>
    );
}
export default Login
